<template>
	<div class="search">
		<div class="search-input">
			<input type="text" v-model="keyword" placeholder="请输入关键词" @confirm="getGoodsList"/>
			<icon class="search-icon" type="search"></icon>
			<img class="search-clear" @click="clearKeyword" v-if="FileUrl.length>0&&keyword.length>0" :src="FileUrl+'clear-icon.png'" />
		</div>
		<div class="body">
			<div class="search-default" v-if="!searchShow">
				<div class="hot-search">
					<div class="title">
						<span>热搜</span>
					</div>
					<div class="list" v-if="recommend_keyword.length>0">
						<div class="item" v-for="(item,index) in recommend_keyword" :key="index" @click="changeKeyWords(item)">{{item}}</div>
					</div>
					<div class="null" v-if="recommend_keyword.length==0">
						暂无热门搜索词~~
					</div>
				</div>
				<div class="history-search" v-if="my_history.length>0">
					<div class="title">
						<span>搜索历史</span>
						<div class="delicon" @click="delMykeywordRecord">
							<img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/boluodan/delete-icon.png">
							清空
						</div>
					</div>
					<div class="list">
						<div class="item" v-for="(item,index) in my_history" :key="index" @click="changeKeyWords(item)">{{item}}</div>
					</div>
				</div>
			</div>

			<div class="search-nav" v-if="searchShow">
				<div class="search-nav-item" :class="{'active':type == ''}" @click="searchOrderBy('')">综合</div>
				<div class="search-nav-item" :class="{'active':type == 'price'}" @click="searchOrderBy('price')">价格</div>
				<div class="search-nav-item" :class="{'active':type == 'sale'}" @click="searchOrderBy('sale')">销量</div>
			</div>
			<div class="search-list" v-if="searchShow" :class="{'padding-top':searchShow}">
				<div class="null" v-if="searchList.length==0">
					没有搜索到相关产品~~
				</div>
				<div class="search-item" v-for="(item,index) in searchList" :key="index" @click="toGoodsDetail(item.id)">
					<div class="left">
						<div class="item-img">
							<img :src="item.thumb_Url" mode="aspectFit" />
						</div>
					</div>
					<div class="right">
						<div class="item-des">{{item.name}}</div>
						<div class="price">
							<span>￥{{item.s_price}}</span>
							<span class="original">￥5.00</span>
						</div>
						<img class="img" src="http://file.rzkeji.com/web/pygxs2020/images/icon/icon-btn-cart.png" @click.stop="getGoodsDetails(item.id)" />
						<div class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 弹出层 -->
		<div class="mask" v-if="showModal" @click="hideCart"></div>
		<div class="modalDlg" v-if="showModal">
			<div class="modalDlg_top">
				<img :src="goodsDetail.thumb_url" alt="">
				<div class="modalDlg_top_right">
					<div class="modalDlg_top_right_name">
						<!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
						<span>{{goodsDetail.name}}</span>
					</div>
					<div class="cart_price">
						<span v-if="credit">{{goodsDetail.exchange_integral}}积分</span>
						<span v-else>￥{{goodsDetail.s_price}}</span>
						<span>库存：{{goodsDetail.stock}}</span>
					</div>
				</div>
			</div>
			<div class="modalDlo_center">
				<div class="modalDlo_center_tit" v-if="size.length!=0">尺码</div>
				<div class="modalDlo_center_classify" v-if="colorIndex==-1">
					<div
							v-for="(item,index) in sizeAll"
							:key="index" @click="select_size(index)"
							:class="{selectClassify:index==sizeIndex}"
					>
						{{item}}
					</div>
				</div>
				<div class="modalDlo_center_classify" v-if="colorIndex!=-1">
					<div
							v-for="(item,index) in sizeAll"
							:key="index" @click="select_size(index)"
							:class="{selectClassify:index==sizeIndex,disabled:selectSizes[index]}"
					>
						{{item}}
					</div>
				</div>
				<div class="modalDlo_center_tit" v-if="colorAll.length!=0">颜色</div>
				<div class="modalDlo_center_classify" v-if="sizeIndex==-1">
					<div
							v-for="(item,index) of colorAll"
							:key="index" @click="select_classify(index)"
							:class="{selectClassify:index==colorIndex}"
					>
						{{item}}
					</div>
				</div>
				<div class="modalDlo_center_classify" v-if="sizeIndex!=-1">
					<div
							v-for="(item,index) of colorAll"
							:key="index" @click="select_classify(index)"
							:class="{selectClassify:index==colorIndex,disabled:selectColors[index]}"
					>
						{{item}}
					</div>
				</div>
			</div>
			<div class="modalDlo_bottom">
				<count @numberChange="numberChange" :stock="goodsDetail.stock">
					<div>购买数量</div>
				</count>
			</div>
			<div class="join_cart" v-if="!buyNow" @click="addCart">加入购物车</div>
			<div class="join_cart" v-else @click="buying">立即购买</div>
		</div>
		<!-- 弹出层结束 -->
	</div>
</template>

<script>
import count from '@/components/count'
export default {
	name: "index",
	components:{
		count
	},
	data(){
		return{
			keyword:'',
			FileUrl: this.$base,
			page: 1,
			limit: 10,
			searchList: [],
			my_history:[],
			recommend_keyword:[],
			searchShow: false,
			type: '',
			showModal: false,
			goodsDetail: '',
			classifyIndex: -1,
			classifyId: '',
			num:1,//购买商品数量
			id: '',
			goods_spu_info: [],
			size: [],
			selectSizes:[],
			sizeAll: [],
			color:[],
			selectColors:[],
			colorAll: [],
			sizeIndex: -1,
			colorIndex: -1,
		}
	},
	onShow(){
		this.getSearchKeyword();
		this.keyword = '';
		this.searchShow = false;
	},
	onReachBottom(){
		this.page++;
		this.getGoodsList()
	},
	methods:{
		searchOrderBy(type){
			this.type = type;
			this.getGoodsList();
		},
		changeKeyWords(item){
			this.keyword = item;
			this.getGoodsList();
		},
		//获取搜索记录与推荐关键词
		async getSearchKeyword(){
			const res = await this.$request.getData('/other/getSearchKeyword',{user_token: wx.getStorageSync('userToken')});
			if (res.data.level == 'success'){
				this.my_history = res.data.data.my_history;
				this.recommend_keyword = res.data.data.recommend_keyword;
			}
		},
		//清空我的搜索记录
		async delMykeywordRecord(){
			const res = await this.$request.postData('/other/delMykeywordRecord',{user_token: wx.getStorageSync('userToken')});
			if (res.data.level == 'success'){
				this.getSearchKeyword();
			}
		},
		//获取搜索结果
		async getGoodsList(){
			if (this.keyword.trim()==''){
				return ;
			}
			wx.showLoading()
			let params = {
				goods_name: this.keyword,
				page: this.page,
				limit: this.limit,
				order_by: this.type,
				user_token: wx.getStorageSync('userToken')
			}
			const res = await this.$request.getData('/goods/getGoodsList',params);
			if (res.data.level == 'success'){
				if (this.page==1){
					this.searchList = res.data.data;
				} else {
					if (res.data.data.length>0){
						this.searchList = this.searchList.concat(res.data.data);
					} else {
						this.page--;
					}
				}

				this.searchShow = true;
				wx.hideLoading()
			}
		},
		clearKeyword(){
			this.keyword = '';
			this.searchShow = false;
			this.getSearchKeyword();
		},
		toGoodsDetail(id){
			wx.navigateTo({url:'/pages/goodsDetail/goodsDetail?id='+id})
		},
		hideCart(){
			this.showModal = false;
			this.goodsDetail = '';
		},
		//获取商品详情
		async getGoodsDetails(id){
			if (id != this.id){
				this.classifyId = '';
				this.colorIndex = -1;
			}
			let res = await this.$api.getGoodsDetails( {
				goods_id: id,
			})
			if(res.data.level=='success'){
				this.goodsDetail = res.data.data;
				this.id = id;
				this.num=1;
				this.showModal = true;
				this.goods_spu_info = res.data.data.goods_spu_info;
				this.select();
				// wx.hideTabBar();
			}
		},
		select(){
			this.colorAll = [];
			this.size = [];
			this.color = [];
			this.colorIndex = -1;
			this.classifyId = '';
			this.goods_spu_info.forEach(item => {
				if (this.colorAll.indexOf(item.color_spu_name)==-1){
					this.colorAll.push(item.color_spu_name)
				}
			})
		},
		selectColor(value){
			let color = [];
			// let stock = [];
			this.goods_spu_info.forEach(item => {
				color.push(item.color_spu_name);
			})
			this.color.push(color);
		},
		select_classify(index) {//选择规格
			// this.classifyIndex = index
			// this.classifyId = item.id
			if (this.colorIndex == index){
				this.colorIndex = -1;
				this.classifyId = '';
				this.getGoodsDetails(this.id);
			} else {
				this.colorIndex = index;
			}

			let str = [];
			if (this.colorIndex!=-1){
				this.selectClassifys()
			}
		},
		selectClassifys(){
			this.goods_spu_info.forEach(item => {
				if (item.color_spu_name==this.colorAll[this.colorIndex]){
					this.$set(this.goodsDetail, 'stock', item.stock)
					this.$set(this.goodsDetail, 's_price', item.price);
					this.$set(this.goodsDetail,'thumb_url',item.img_url);
					this.classifyId = item.id;
				}
			})
		},
		numberChange(num){
			this.num=num
		},

		//添加到购物车
		async addCart(){//添加到购物车
			const _this=this
			if(this.num<=0){
				this.$currency.showToast('购买数量不能为0');
				return
			}else if(this.classifyId==''){
				this.$currency.showToast('先选择规格吧');
				return
			}
			var userToken=uni.getStorageSync('userToken')
			let res=await this.$request.postData('/goods/addShopCart',{
				goods_id:this.id,
				num:this.num,
				user_token:userToken,
				goods_spu_id:this.classifyId
			})
			wx.showLoading()
			if(res.data.level=='success'){
				_this.$currency.showToast('成功加入购物车','success',1500);
				_this.showModal=false;
				// wx.showTabBar();
				_this.classifyId = '';
				_this.classifyIndex = -1;
				let num = _this.page;
				for (let i = 0; i< num ; i++){
					_this.page = i+1;
					_this.getGoodList()
				}
				wx.hideLoading();
			}else{
				wx.hideLoading({success:function(){
						_this.$currency.showToast(res.data.message,'none',1500)
					}});

			}
		},

		// hideCart(){
		// 	this.showModal = false;
		// 	this.goodsDetail = '';
		// 	wx.showTabBar();
		// },
	}
}
</script>

<style scoped lang="scss">
	@import "../../common/css/mixin";
	.search{
		padding-top: 120rpx;
	}
	.search-input{
		position: fixed;
		left: 0;
		top: 0;
		padding: 20rpx 30rpx;
		background: #f64949;
		width: calc(100vw - 60rpx);
		z-index: 1000;
		input{
			width: calc(100% - 160rpx);
			height: 80rpx;
			line-height: 80rpx;
			/*border: 1rpx solid #eeeeee;*/
			background: #fff;
			padding: 0 80rpx;
			border-radius: 32rpx;
		}
		.search-icon{
			position: absolute;
			top: 40rpx;
			left: 50rpx;
		}
		.search-clear{
			position: absolute;
			top: 40rpx;
			right: 50rpx;
			height: 40rpx;
			width: 40rpx;
		}
	}
	.body{
		padding-top: 40rpx;
	}
	.search-default{
		padding: 0 30rpx;
		.hot-search{
			.title{
				height: 50rpx;
				line-height: 50rpx;
			}
			.list{
				padding-top: 40rpx;
				@include flexWrap(flex-start,flex-start);
				flex-direction: row;
				.item{
					width: calc((100% - 130rpx)/3);
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					border: 1rpx solid #e8e8e8;
					border-radius: 20rpx;
					background: #ffffff;
					margin-right: 40rpx;
					margin-bottom: 40rpx;
					font-size: 30rpx;
					color: #878686;
				}
			}
		}
		.history-search{
			.title{
				@include flex(flex-start);
				flex-direction: row;
				height: 50rpx;
				line-height: 50rpx;
				.delicon{
					margin-left: auto;
					height: 50rpx;
					line-height: 50rpx;
					@include flex(flex-start);
					flex-direction: row;
					color: #707070;
					img{
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.list{
				padding-top: 40rpx;
				@include flexWrap(flex-start,flex-start);
				flex-direction: row;
				.item{
					width: calc((100% - 130rpx)/3);
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					border: 1rpx solid #e8e8e8;
					border-radius: 20rpx;
					background: #ffffff;
					margin-right: 40rpx;
					margin-bottom: 40rpx;
					font-size: 30rpx;
					color: #878686;

				}
			}
		}
	}
	.search-nav{
		position: fixed;
		top: 120rpx;
		left: 0;
		padding: 0 30rpx;
		border-bottom: 1px solid #e7e6e6;
		background: #ffffff;
		width: calc(100vw - 60rpx);
		z-index: 1000;
		@include flex(flex-start);
		flex-direction: row;
		.search-nav-item{
			width: 33.3%;
			height: 80rpx;
			line-height: 80rpx;
			&:nth-child(2){
				text-align: center;
			}
			&:last-child{
				text-align: right;
			}
		}
	}
	.padding-top{
		padding-top: 20rpx;
	}
	.active{
		font-size: 32rpx;
		font-weight: bold;
	}
	.search-list{
		margin-top: 20px;
		@include flexWrap(center,flex-start);
		flex-direction: column;
		width: 100vw;
		/*background: #ffffff;*/
		.search-item{
			width: calc(100% - 40rpx);
			padding: 20rpx;
			/*border-radius: 16rpx;*/
			border-bottom: 1rpx solid #eeeeee;
			overflow: hidden;
			background: #ffffff;
			@include flex(flex-start);
			flex-direction: row;
			.left{
				width: 200rpx;
				height: 200rpx;
				overflow: hidden;
				.item-img{
					width: 100%;
					height: 100%;

					img{
						width: 100%;
						height: 100%;
					}
				}
			}
			.right{
				width: calc(100% - 200rpx);
				position: relative;
				.item-des{
					height: 100rpx;
					line-height: 50rpx;
					@include ellipsis(2);
					padding: 10px 0;
				}
				.price{
					font-size: 26rpx;
					@include flex(flex-start,flex-end);
					flex-direction: row;
					height: 60rpx;
					width: calc(100% - 300rpx);
					color: #e12317;
					.original{
						font-size: 22rpx;
						color: #707070;
						text-decoration: line-through;
						padding-left: 20rpx;
					}
				}
				.img{
					position: absolute;
					bottom: 0;
					right: 0;
					width: 40rpx;
					height: 40rpx;
				}
				.img-icon{
					position: absolute;
					bottom: 20rpx;
					right: 0;
					width: 20rpx;
					height: 20rpx;
					background: #e12317;
					border-radius: 360rpx;
					color: #ffffff;
					font-size: 18rpx;
					text-align: center;
					line-height: 20rpx;
				}
			}
		}
	}
	.null{
		padding: 40rpx;
		text-align: center;
		color: #707070;
		width: calc(100% - 80rpx);
	}
	/* 弹出框 */
	.mask{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 9000;
		opacity: 0.7;
	}
	.modalDlg{
		width: 100%;
		height:60%;
		position: fixed;
		bottom:0;
		left: 0;
		z-index: 9999;
		background-color: #fff;
		padding-bottom: 40px;
	}

	.modalDlg_top{
		padding:5px;
		padding-right:25px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		height: 30%;

	}
	.modalDlg_top>img{
		width:80px;
		height: 80px;
	}
	.modalDlg_top_right{
		margin-left:20px;
		width:calc(100% - 100px);
	}
	.modalDlg_top_right_name{
		display: flex;
		align-items: center;
		span{
			@include ellipsis(3)
		}
	}
	.modalDlg_top_right_name_tag{
		color:purple;
		display: inline-block;
		width:50px;
		text-align: center;
		border:1px solid purple;
		font-size: 10px;
		border-radius: 5px;
		margin-right:5px;
	}
	.modalDlg_top_right_name_tag+span{
		width:200px;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.modalDlo_bottom{
		margin-left:5px;
	}
	.cart_price{
		margin-top:15px;
		display: flex;
		justify-content: space-between;
		align-items: center
	}
	.cart_price>span:nth-child(1){
		color:red;
	}
	.modalDlo_center{
		height: 50%;
		overflow-x: hidden;
		overflow-y: scroll;
		@include flex(center,flex-start);
		flex-direction: column;
		padding: 10px 0;
	}
	.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
		width:100%;
		/*max-height: 45%;*/
	}
	.modalDlo_center_classify{
		display:flex;
		align-items: center;
		flex-wrap:wrap;
		margin:10px 0;
		/*padding-bottom: 50px;*/
	}
	.modalDlo_center_classify>div{
		border:1px solid #eee;
		padding:2.5px 5px;
		border-radius: 5px;
		margin-left:5px;
		text-align: center;
	}
	.modalDlo_center_tit{
		padding-left:10px;
	}
	.join_cart{
		width:100%;
		background: rgb(196, 75, 75);
		color:#fff;
		font-size: 20px;
		text-align: center;
		line-height: 40px;
		position: absolute;
		bottom:0;
	}
	button::after {
		border: none;
	}
	button {
		background-color: #fff;
		line-height: 16px;
		font-size: 10px;
		border-radius:0;
	}
	/* 规格 */
	.selectClassify{
		border:red 1px solid !important;
		color:red;
	}

	.disabled{
		pointer-events: none;
		cursor: default;
		opacity: 0.6;
	}
</style>
